<template>
    <el-menu style="background-image: linear-gradient(to right, #8ac9e2, #80eff3);" mode="horizontal"
             text-color="#fff"
             active-text-color="#ffd04b"
             @select="choicePage">
        <el-menu-item index="1">
            <i slot="title" class="title">{{ name }}</i>
        </el-menu-item>
        <el-menu-item index="2" style="margin-left: 66%" title="学生">
            <i class="el-icon-user" style="font-size: 20px"></i>
        </el-menu-item>
        <el-menu-item index="3">
            <i class="el-icon-s-management" style="font-size: 20px" title="班级"></i>
        </el-menu-item>
        <el-menu-item index="4">
            <i class="el-icon-school" style="font-size: 20px"></i>
        </el-menu-item>
        <el-menu-item index="5">
            <i class="el-icon-discount" style="font-size: 20px"></i>
        </el-menu-item>
    </el-menu>
</template>

<script>
export default {
    name: "Header",
    props: {
        name
    },
    methods: {
        choicePage(index) {
            switch (index) {
                case '2':
                    this.$router.push("/student")
                    break
                case '3':
                    this.$router.push("/class")
                    break
                case '4':
                    console.log("major")
                    break
                case '5':
                    console.log("upload")
                    break
            }
        }
    }
}
</script>

<style scoped>

.title {
    color: #6b6d72;
    font-size: 25px;
    font-family: 宋体, serif;
    font-weight: bolder;
    margin: auto;
}

</style>
